import React, {Component} from 'react';
import { Route, Link, Switch } from 'react-router-dom'

// 组件
import MovieList from "./MovieList.jsx";
import MovieDetail from "./MovieDetail.jsx"

// ant design样式
import { Layout, Menu } from 'antd';
const { Content, Sider } = Layout;

class MovieContainer extends Component {
  render() {
    return <Layout style={{height:'100%'}}>
      {/* 左侧边栏*/}
      <Sider width={200} className="site-layout-background">
        <Menu
          mode="inline"
          defaultSelectedKeys={[window.location.hash.split('/')[2]]}
          style={{ height: '100%', borderRight: 0 }}
        >
          <Menu.Item key="in_theaters" style={{marginTop:0}}>
            <Link to="/movie/in_theaters/1">正在热映</Link>
          </Menu.Item>
          <Menu.Item key="coming_soon" style={{marginTop:0}}>
            <Link to="/movie/coming_soon/1">即将上映</Link>
          </Menu.Item>
          <Menu.Item key="top250" style={{marginTop:0}}>
            <Link to="/movie/top250/1">top250</Link>
          </Menu.Item>
        </Menu>
      </Sider>
      
      {/*右侧内容*/}
      <Layout style={{flex:1,borderLeft:'1px solid #f0f2f5',backgroundColor: '#fff' }}>
        <Content className="site-layout-background" style={{padding:10, margin: 0, minHeight: 280,backgroundColor:'#fff'}}>
          <Switch>
            <Route exact path="/movie/detail/:id" component={MovieDetail}/>
            <Route exact path="/movie/:type/:page" component={MovieList}/>
          </Switch>
        </Content>
      </Layout>
    </Layout>
  }
}

export default MovieContainer;
